<template>
  <div class="help-center pb70">
    <div class="help-center-banner">
    </div>
    <div class="tab container fix">
      <ul class="tab-title flo-left">
        <li v-bind:class="{active:helpIndex===index}" v-for="(item,index) in helpList" @click="tab(index)">{{item.title}}</li>
      </ul>
      <div class="tab-inner">
        <div class="tab-con" v-for="(item,index) in helpList" v-show="helpIndex===index">
          <h2 class="box-title rel">{{item.title}}</h2>
          <div class="con" v-html="item.content"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      helpIndex: parseInt(this.$route.query.page) || 0,
      helpList: []
    }
  },
  mounted() {
    this.tab(this.helpIndex)
    var parms = {
      type: 3
    }
    this.$http.get('/sysContent/list', {
      params: parms
    }).then(data => {
      if (data.data.httpCode === 200) {
        this.helpList = data.data.rows
      } else {
        console.log(data.data.msg)
        this.$toasted.show(data.data.msg)
      }
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    tab(i) {
      this.helpIndex = i
    }
  }
}

</script>
<style type="text/css" scoped>
.help-center-banner {
  width: 100%;
  height: 300px;
  background: url(../assets/help_02.jpg) no-repeat center;
  background-size: cover;
}

.tab {
  margin-top: 30px;
}

.tab .tab-title {
  width: 250px;
}

.tab-inner {
  margin-left: 265px;
  background-color: #fff;
}

.tab-title li {
  line-height: 50px;
  text-indent: 43px;
  background-color: #f5f9ff;
  font-size: 16px;
  cursor: pointer;
}

.tab-title li.active {
  background-color: #01378c;
  color: #fff;
}

.tab-inner .con {
  padding: 30px 40px;
}

</style>
